<template>
    <div class="text-flash">
        <span
            v-for="(v, index) in list"
            :key="index"
            :style="`animation-delay: ${(index + 1) * 0.2}s;`"
        >
            {{ v }}
        </span>
    </div>
</template>

<script>
export default {
    name: "text-flash",
    props: {
        list: {
            type: Array,
        },
    },
};
</script>

<style lang="less" scoped>
.text-flash {
    span {
        display: inline-block;
        opacity: 0.2;
        will-change: transform;
        animation: animationLink 3s linear infinite alternate;
    }
}

@keyframes animationLink {
    0% {
        opacity: 0.2;
    }

    14.2% {
        opacity: 0.4;
    }

    28.4% {
        opacity: 0.6;
    }

    42.6% {
        opacity: 0.8;
    }

    56.8% {
        opacity: 1;
    }

    71% {
        opacity: 0.8;
    }

    85.2% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.4;
    }
}
</style>